import * as echarts from 'echarts'
import React from 'react'

/**
 * 名称：排名图
 * 描述：排名图
 * 调用：营销效果中心
 * 输入：store 营销数据
 * 时间：20220404
 */
class RankItemEchart extends React.Component {
    draw(){
        const {store} = this.props
        let  {id,titleLabel,data} = store
        
        let  chartDom = document.getElementById(id)
        let  myChart = echarts.init(chartDom)
        let  option

        
    
        let  xAxisData = []
        let  seriesData = []

        if(!data[0]){
            return;
        }
        data.map((item)=>{
            xAxisData = [...xAxisData,item.name]
            seriesData = [...seriesData,item.joinNum]
            
            
        })  

        
        option ={
            
            backgroundColor: '#2c343c',
            title: { 
            textStyle: {
                color: '#ccc'
            },
            text: titleLabel },
            tooltip : {
            trigger: 'axis'
        },
        
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {
                    show: true,
                    type: 'jpg'
                }
            }
        },
            xAxis : [
                {
                    type : 'category',
                    data : xAxisData,
                    axisLabel:{
                        rotate:45,
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : {
                name:'活动排名',
                type:'bar',
                data: seriesData,
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            }
        }
        option && myChart.setOption(option);
    }
  componentDidUpdate() {
      this.draw()

    }
    componentDidMount() {
        
        this.draw()
    }
render() {
    const {store} = this.props
    const {id} = store
    return (
        <div id={id} style={{ width: '100%', height: "100%" }}></div>
    );
}
}

export default RankItemEchart